<template>
  <div class="channel_list">
    <div class="content-width list left">
      <div class="channel_scroll">
        <router-link to="/class/vip" @click='type="vip"' :class="type=='vip'?'channel_item active':'channel_item'">会员专区</router-link>
        <router-link to="/class/videoClass" @click='type="videoClass"' :class="type=='videoClass'?'channel_item active':'channel_item'">视频课</router-link>
        <router-link to="/class/live" @click='type="live"' :class="type=='live'?'channel_item active':'channel_item'">直播课</router-link>
        <router-link to="/class/offLive" @click='type="offLive"' :class="type=='offLive'?'channel_item active':'channel_item'">线下课</router-link>
        <router-link to="/class/subject" @click='type="subject"' :class="type=='subject'?'channel_item active':'channel_item'">主题</router-link>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent} from 'vue';

export default defineComponent({
  name: 'Class',
});
</script>

<script setup lang="ts">

import {ref } from 'vue';

const type=ref('vip')



</script>

<style scoped lang="less">
.channel_list {
  margin-bottom: 10px;
  width: 100%;
  background: #fff;
  text-align: center;
  height: 80px;
  line-height: 80px;
  color: #7d8090;
  font-size: 16px;
  -ms-overflow-style: none;
  overflow: hidden;
  .list {
    position: relative;
  }
  .channel_scroll {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: 1000px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .channel_item.active {
    color: #111;
    border-bottom: 3px solid #000;
  }
  .channel_item {
    padding: 20px 4px;
    margin: 0 20px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
  }
  a{
    text-decoration: none;
  }
}

.content-width {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
</style>
